<template>
	<view class="content">
		<view class="top">
			<u-search placeholder="请输入想要搜索的商品" @search="handleToSearch" v-model="keyword" :showAction="false" height="40"></u-search>
		</view>
		<view class="hot">
			<view class="title">
				热门搜索
			</view>
			<view class="sbox">
				<view class="item">热门手袋</view>
				<view class="item">男士包袋</view>
				<view class="item">女士甄选</view>
				<view class="item">女士围巾</view>
				<view class="item">男士围巾</view>
				<view class="item">包饰搭配</view>
				<view class="item">新春甄礼</view>
				<view class="item">时尚女装</view>
			</view>
		</view>
		<view class="good">
			<view class="titles">
				推荐商品
			</view>
			<view class="list">
				<view class="item" v-for="item in goodsList" :key="item.id" @click="handleToDetail(item.id)">
					<view class="image"> 
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="text">
						<view class="title clamp1">
							{{item.name}}
						</view>
						<view class="dec clamp1">
							{{item.subTitle}}
						</view>
						<view class="price">
							¥ {{item.price}}
						</view>
					</view>
				</view>  
				 
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyword:'',
				goodsList:[]
			}
		},
		onLoad() {
			this.getRecomGoodList()
		},
		methods:{
			handleToSearch(e){
				 uni.navigateTo({
				 	url:`./search_list?key=${e}`
				 })
			},
			handleToDetail(id){
				uni.navigateTo({
					url:`/pages/category/detail?id=${id}`
				})
			},
			getRecomGoodList(){
				this.$http({
					url:"/home/content",
					method:"get",
				}).then(data=>{
					this.goodsList = data.recommendProductList 
				}) 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 30rpx;
		.good{
			margin-top: 50rpx;
			.titles{
				font-size: 30rpx;
				color: #020202;
				font-weight: bold;
				margin-bottom: 40rpx;
			}
			.list{
				 display: flex;
				 flex-wrap: wrap;
				 justify-content: space-between;
				 padding-bottom: 0;
				 .item{
					 width: 49%;
					 background: #F8F8F8;
					 margin-bottom: 22rpx;
					 padding-bottom: 32rpx;
					 &:nth-child(3){
						 margin-bottom: 0;
					 }
					 &:nth-child(4){
						margin-bottom: 0;
					 }
					 .image{
						width: 100%;
						height: 310rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						.t{
							position: absolute;
							width: 80rpx;
							height: 32rpx;
							background: #FFFFFF;
							border-radius: 2rpx;
							text-align: center;
							line-height: 32rpx;
							font-size: 18rpx;
							color: #666666;
							left: 16rpx;
							top: 16rpx;
						}
						image{
							width: 100%;
							height: 310rpx;
						}
					 }
					 .text{
						 padding: 0 30rpx;
						padding-top: 20rpx;
						.title{
							font-size: 24rpx;
							color: #333;
							text-align: center;
						}
						.dec{
							font-size: 22rpx;
							color: #999;
							margin-top: 8rpx;
							text-align: center;
						}
						.price{
							font-size: 24rpx;
							text-align: center;
						font-family: 'DINPro-Medium';
							color: #333;
						}
					 }
				 }
			}
		}
		.hot{
			margin-top: 55rpx;
			.title{
				font-size: 30rpx;
				color: #020202;
				font-weight: bold;
				margin-bottom: 40rpx;
			}
			.sbox{
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 23.6%;
					height: 76rpx;
					background: #F8F8F8;
					text-align: center;
					line-height: 76rpx;
					font-size: 24rpx;
					color: #020202;
					margin-bottom: 20rpx;
					margin-right: 1.7%;
					&:nth-child(4n){
						margin-right: 0;
					}
				}
			}
		}
	}
</style>